<template>
  <div id="scan">
    <div class="scan-content">
      <p class="tip">扫码入园场景：</p>
      <a-row class="scan-row">
        <a-col span="4">场景描述：</a-col>
        <a-col span="14">第三方网站模拟景区运营系统，屏幕上显示“景区门关闭状态”。
          用户打开载体APP，进入一码通H5页面，展示二维码，扣在扫码墩上，第三方网站上
          显示“识别成功，景区门打开，可以入园”</a-col>
      </a-row>
      <a-row class="scan-row">
        <a-col span="4">场景说明：</a-col>
        <a-col span="14">
          第三方开发商需要新对接“一码通”的入园方式，demo程序能自动识别二维码类型为“一码通”方式
        </a-col>
      </a-row>
    </div>
    <div class="scan-code">
      <a-row type="flex" align="middle">
        <a-col span="8">
          <img src="../../assets/img/bssz2.jpg" width="100%">
        </a-col>
        <a-col span="14" offset="1">
          <p>请用户出示二维码通过扫码墩扫码，或者
            您也可以直接手工输入用户的二维码信息：
          </p>
          <a-input class="code-in" v-model="authCode" ref="code" placeholder="用户二维码信息" @change="handleIn"></a-input>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import ACol from "ant-design-vue/es/grid/Col";
export default {
  name: "scan",
  components: {ACol},
  data() {
    return {
      radioList: [
        {
          label: "已支付扫码入园",
          value: 0
        },
        {
          label: "现场支付后入园",
          value: 1
        }
      ],
      type: 0,
      sign: false,
      authCode: ""
    };
  },
  mounted() {
    this.$refs.code.focus();
  },
  methods: {
    goRes() {
      this.$router.push("/result");
    },
    getInfo() {
      this.api.scanCode({ authCode: this.authCode }).then(res => {
          this.$message.info("操作成功！");
          sessionStorage.setItem("user_info", JSON.stringify(res));
          setTimeout(() => {
            this.goRes();
            this.authCode = "";
          }, 1000);
        })
        .catch(err => {
          this.authCode = "";
        });
    },
    handleIn() {
      if (this.authCode.length === 22) {
        this.getInfo();
      }
    }
  }
};
</script>

<style lang="less" scoped>
#scan {
}
.scan-content {
  padding: 50px 50px 20px 60px;
}
.tip {
  font-size: 28px;
  font-weight: 600;
  font-family: AlibabaPuHuiTiR;
}
.tip-img {
  margin: 25px 0 0 0;
  text-align: center;
}
.scan-row {
  margin: 30px 0 15px 0;
  font-size: 16px;
  color: #333;
  line-height: 28px;
}
.scan-code {
  padding: 0 0 10px 40px;

  p {
    font-size: 16px;
    color: #333;
  }

  .code-in {
    width: 45%;
    margin: 25px 0;
  }
}
.scan-voice {
  display: flex;
  align-items: center;
  margin: 40px 0;
  font-size: 18px;
  .voice-tip {
    padding-left: 20px;
  }
  .voice-img {
    background: #1890ff;
    border-radius: 50%;
    padding: 6px;
  }
  ._img {
    width: 30px;
    height: 30px;
  }
  ._img_a {
    width: 30px;
    height: 30px;
    opacity: 0.1;
    animation-name: breath;
    animation-duration: 700ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;

    -webkit-animation-name: breath; /* 动画名称 */
    -webkit-animation-duration: 700ms; /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
  }
  @keyframes breath {
    from {
      opacity: 0.1;
    } /* 动画开始时的不透明度 */
    50% {
      opacity: 1;
    } /* 动画50% 时的不透明度 */
    to {
      opacity: 0.1;
    } /* 动画结束时的不透明度 */
  }

  @-webkit-keyframes breath {
    from {
      opacity: 0.1;
    } /* 动画开始时的不透明度 */
    50% {
      opacity: 1;
    } /* 动画50% 时的不透明度 */
    to {
      opacity: 0.1;
    } /* 动画结束时的不透明度 */
  }
}
p {
  margin: 0;
}
</style>
